<template>
  <div class="page-wrap">
    <View :title="data.obj1.name" v-if="data.obj1" class="top">
      <van-row justify="space-between" >
        <van-col span="4" v-for="item of data.obj1.children" :key="item.id" @click="redirectUrl(item.url)">
          <img :src="item.image" alt="">
          <span class="sub-title">{{ item.name }}</span>
        </van-col>
      </van-row>
    </View>
    <View :title="data.obj2.name" v-if="data.obj2" class="top">
      <van-row justify="space-between">
        <van-col span="4" v-for="item of data.obj2.children" :key="item.id" @click="redirectUrl(item.url)">
          <img :src="item.image" alt="">
          <span class="sub-title">{{ item.name }}</span>
        </van-col>
      </van-row>
    </View>
    <View :title="data.obj3.name" v-if="data.obj3">
      <van-row justify="space-between" class="biaozhun">
        <van-col span="8" v-for="item of data.obj3.children" :key="item.id" @click="redirectUrl(item.url)">
          <img :src="item.image" alt="">
          <span class="sub-title">{{ item.name }}</span>
        </van-col>
      </van-row>
    </View>
    <View :title="data.obj4.name" v-if="data.obj4" class="smart">
      <van-row justify="space-between" :wrap="false">
        <van-col span="5" v-for="item of data.obj4.children" :key="item.id" @click="redirectUrl(item.url)">
          <img :src="item.image" alt="">
          <span class="sub-title">{{ item.name }}</span>
        </van-col>
      </van-row>
    </View>
    <View>
      <van-row justify="space-between" class="tab" :gutter="10">
        <van-col span="8" v-for="(item, index) of data.obj5.children" :key="item.id" @click="redirectUrl(item.url)">
          <img :src="item.image" class="img2" alt="">
          <div class="text-box">
            <img :src="index == 0 ? pic1 : index == 1 ? pic2 : pic3" class="box-img" alt="">
            <span>{{ item.name }}</span>
          </div>
        </van-col>
      </van-row>
    </View>
  </div>  
</template>
<script setup>
import View from './components/View.vue'
import { onMounted,reactive } from 'vue'
import { getCateList } from '@/api.js'
import { useRouter } from 'vue-router'
import pic1 from '@/assets/home/lo1.png'
import pic2 from '@/assets/home/lo2.png'
import pic3 from '@/assets/home/lo3.png'
const Router = useRouter()
const data = reactive({
  obj1: {},
  obj2: {},
  obj3: {},
  obj4: {},
  obj5: {},
  obj6: {}
})
const redirectUrl = url => {
  if (url) {
    window.location.href = url
  }
}
onMounted(() => {
  getCateList().then(res=>{
    const list = res.data
    data.obj1 = list.filter(item => item.type == 1)[0]
    data.obj2 = list.filter(item => item.type == 2)[0]
    data.obj3 = list.filter(item => item.type == 3)[0]
    data.obj4 = list.filter(item => item.type == 4)[0]
    data.obj5 = list.filter(item => item.type == 5)[0]
    data.obj6 = list.filter(item => item.type == 6)[0]
  })
})
</script>
<style scoped>
.page-wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #F6F6F6;
}
.top img {
  width: 48px;
  height: 48px;
}
.sub-title {
  display: block;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
}
.biaozhun img {
  width: calc(100% - 10px);
  height: 53px;
}
.biaozhun .van-col {
  position: relative;
}
.biaozhun .sub-title {
  position: absolute;
  top: 50%;
  left: calc(50% - 10px);
  transform: translate(-50%,-50%);
}
.smart .van-row {
  text-align: center;
  overflow-x: scroll;
}
.smart .van-row::-webkit-scrollbar {
    display: none;
  }
.smart img {
  width: 54px;
  height: 54px;
}
.smart {
  overflow: hidden;
}
.tab {
  margin-top: 10px;
  margin-bottom: 10px;
}
.tab .van-col{
  position: relative;
}
.img2 {
  /* position: absolute;
  top: 50%;
  left: 10px;
  width: calc(100% - 10px);
  transform: translateY(-50%); */
  width: 100%;
  height: 50px;
}
.tab .text-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 700;
  width: 84px;
}
.box-img {
  width: 18px;
  height: 18px;
}
</style>